<template>
  <a-drawer
    closable
    title="明细"
    placement="right"
    width="1000px"
    height="100%"
    :visible="visible"
    @close="close"
  >
    <a-card :bordered="false" style="overflow-y: scroll;height:calc(100vh - 55px - 73px)">
      <a-row :gutter="24">

        <div class='flex'style='box-sizing: border-box'>
          <!--<div class='flex wrap'>-->
            <!--<div class='items' style='width: 55%'><div class='items-text'>单据编号:</div>  <a-input placeholder="请输入单据编号" v-model="queryParam.dataSn" style='width:200px '> </a-input></div>-->
            <!--<div class='items' style='width: 45%'><div class='items-text'>操作类型:</div>-->
              <!--<cn-dict-select-tag :options="{value:'dictDataCode',label:'dictDataDesc'}"-->
                                           <!--v-model="queryParam.dataType"-->
                                           <!--dictCode="fee_detail_type"-->
                                           <!--placeholder="请选择操作类型"-->
                                           <!--style='width: 200px'-->
            <!--/></div>-->
            <!--<div class='items' style='width: 55%'><div class='items-text'>执行时间:</div>-->
              <!--<span style="display: flex;align-items: center">-->
                    <!--<a-date-picker placeholder="开始时间"-->
                                   <!--format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"-->
                                   <!--v-model='queryParam.startDate' style="width: 120px" />-->
                     <!--<span style="margin: 0 5px">~</span>-->
                     <!--<a-date-picker placeholder="结束时间"-->
                                    <!--format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"-->
                                    <!--v-model='queryParam.endDate' style="width: 120px" />-->
                  <!--</span>-->
            <!--</div>-->
            <!--<div class='items' style='width: 45%'><div class='items-text'>操作人:</div>-->
              <!--<a-input placeholder="请输入操作人" v-model="queryParam.createBy" style='width:200px '></a-input>-->
            <!--</div>-->

          <!--</div>-->


          <!--<div class='button'>-->
            <!--<a-button type="primary" @click="searchQuery" icon="search">查询</a-button>-->
            <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
          <!--</div>-->

        </div>


        <a-col :md="24" :sm="24">
            <a-table
              style="min-height:400px"
              ref="table"
              bordered
              size="middle"
              :scroll="{
              x:'max-content'
               }"
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              class="j-table-force-nowrap"
              @change="handleTableChange">
              <span slot="action" slot-scope="text, record">
                <a @click="handleEdit(record)">编辑</a>
              </span>
            </a-table>
        </a-col>
      </a-row>
      <rules-by-cust-detail-update ref='modalForm' @ok="modalFormOk"></rules-by-cust-detail-update>
    </a-card>
    <div class="btn">
      <a-button @click="close" type="primary"  style="margin-right: 2em">关闭</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, httpAction, postAction } from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
import rulesByCustDetail from '@views/tmr/budget/model/rulesByCustDetail'
import rulesByCustDetailUpdate from '@views/tmr/budget/model/rulesByCustDetailUpdate'
export default {
  name: 'costDetail',
  mixins: [PageListMixin],
  components: {
    ARangePicker,
    ARow,
    rulesByCustDetail,
    rulesByCustDetailUpdate
  },
  data(){
    return{
      title:'',
      visible:false,
      disableMixinCreated:true,
      model:{},
      confirmLoading:false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      superQueryParams: '',
      searchConfig:[
        {
          // label:'订单编号',
          type:'input',
          name:'exampleCode',
          placeholder:'请输入示例编码',
        },{
          // label:'业务员',
          type:'input',
          name:'exampleName',
          placeholder:'请输入示例名称',
        },{
          // label:'订单状态',
          type:'a-select',
          name:'exampleType',
          option: [
            {
              name:'采集要求',
              value:'1'
            },
            {
              name:'核销要求',
              value:'2'
            }
          ],
          placeholder:'请选择类型',
        }, {
          type:'a-select',
          name:'status',
          option:[{
            name:'启用',
            value:'009'
          },{
            name:'停用',
            value:'003'
          }],
          placeholder:'请选择状态',
        }
      ],
      columns: [
        {
          title: '规则编码',
          align: "left",
          fixed:"left",
          dataIndex: 'ruleCode',
          width: 130,
          customRender: (value, row, index) => {
            let vm = this
            let child = vm.$createElement('a', {
              domProps: {
                innerHTML: value
              },
              on: {
                click: function() {
                  vm.onDblclicks(row)
                }
              }
            })
            const obj = {
              children: child,
              attrs: {}
            }
            return obj
          }
        },
        {
          title: '规则名称',
          align: "left",
          dataIndex: 'ruleName',
          scopedSlots: { customRender: 'ruleName' }
        },
        {
          title: '规则类型',
          align: "left",
          dataIndex: 'ruleTypeStr',
        },
        // {
        //   title: '适用部门',
        //   align: "left",
        //   width: 200,
        //   dataIndex: 'branch',
        //   scopedSlots: { customRender: 'branch' }
        // },
        // {
        //   title: '适用经销商',
        //   align: "left",
        //   width: 200,
        //   dataIndex: 'custName',
        //   scopedSlots: { customRender: 'custName' }
        // },
        {
          title: '返利金额',
          align: "left",
          dataIndex: 'amount',
        },
        {
          title: '活动预算金额',
          align: "left",
          dataIndex: 'budgetAmount',
        },
        {
          title: '随车促销金额',
          align: "left",
          dataIndex: 'promtionAmount',
        },
        {
          title: '开始日期',
          align: "left",
          dataIndex: 'startDate',
        },
        {
          title: '结束日期',
          align: "left",
          dataIndex: 'endDate',
        },
        {
          title: '规则描述',
          align: "left",
          dataIndex: 'remarks',
          scopedSlots: { customRender: 'remarks' }
        },
        {
          title: '创建人',
          align: "left",
          dataIndex: 'createName',

        },
        {
          title: '创建时间',
          align: "left",
          dataIndex: 'createTime',

        },
        {
          title: '更新人',
          align: "left",
          dataIndex: 'updateName',

        },
        {
          title: '更新时间',
          align: "left",
          dataIndex: 'updateTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "left",
          width: 110,
          fixed:'right',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'},
        }
      ],
      qyeryParams:{
        date:[]
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: window._CONFIG['domianTpmURL'] + '/tpmBudgetRule/findLogPageList',
        // 详情接口
        detail: window._CONFIG['domianTpmURL']+ "/tpmBudgetRule/getLogInfo",
      },
    }
  },
  methods:{
    onDblclicks:async function (record){
      if (this.url.detail) {
        const res = await getAction(this.url.detail, {id: record.id})
        if (res && res.result) {
          record = res.result
        }else{
          this.$message.error(res.message)
        }
      }
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "查看";
      this.$refs.modalForm.disableSubmit = true;
    },
    searchReset(){
      let queryParam={budgetCode:this.queryParam.budgetCode}
      this.queryParam=queryParam
      this.loadData(1)
    },
    add () {
      this.edit({});
    },
    edit (record) {
      this.queryParam={}
      this.model = Object.assign({}, record);
      this.queryParam.ruleCodeOnly = record.ruleCodeOnly
      this.loadData()
      this.visible = true;
    },
    close () {
      this.$emit('close');
      this.dataSource = []
      this.visible = false;
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys[0] = selectedRowKeys
    },
    downExportXls(key) {
      const downurl = window._CONFIG['domianURL'] + '/cnDownloadController/saveOrUpdate'
      if (!key || typeof key != 'string') {
        this.$message.warning('未配置接口标记！')
        return
      }
      let param = {
        accountCode:this.queryParam.accountCode,
        companyCode:this.queryParam.companyCode,
        accountType:this.queryParam.accountType,
        yearBalance:this.queryParam.yearBalance,
        startDate:this.queryParam.startDate,
        endDate:this.queryParam.endDate,
        type:this.queryParam.type
      }
      console.log(param)
      let expParams = JSON.stringify(param)
      // expParams = escape(expParams)
      console.log(Base64.encode(expParams))
      postAction(downurl, { impKey: key, expParams: Base64.encode(expParams) }).then((res) => {
        if (res.success) {
          this.$message.info(res.message + ',等待下载完成！')
        } else {
          this.$message.warn(res.message)
        }
      })
    },

    handleOk () {
      let data
      const that = this;
      that.$emit('ok',this.selectedRowKeys,this.selectionRows[0]);
      that.confirmLoading = false;
      that.close();
    },
    handleCancel () {
      this.close()
    },

    dateRangeChange(date){
      if(!date){
        this.queryParam.startDate=''
        this.queryParam.endDate=''
        return
      }
      this.queryParam.startDate=date[0]
      this.queryParam.endDate=date[1]
    }
  }

}
</script>

<style scoped>
.btn{
  z-index:9999;
  background-color: #FFFFFF;
  position: absolute;
  bottom:0;
  width: 96%;
  border-top: 1px solid #e8e8e8;
  padding: 20px 0;
  text-align: right;
}
.flex{
  display: flex;

}
.wrap{
  flex-wrap: wrap;
}
.items{
  display: flex;
  align-items: center;
  width: 50%;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}
.items-text{
  width: 60px;
  margin-right: 10px;
  text-align: right;
}
.button{
  width: 200px;
  flex-shrink: 0;
}
</style>